<template>
	
		<view class="box">
				<view class="daohang">
					<text>取餐</text>
				</view>
				<view class="dandgsagd">
					<text :class="isf==0?'yanshegnag':''" @click="dangqian">当前订单</text>
					<text :class="isf==1?'yanshegnag':''" @click="lishu">历史订单</text>
				</view>
				<!-- 当前点单的 -->
				<view v-if="diang==0" class="box2">
					<view class="image" >
						<image :src="isf==0?dangqiankk:lishi" mode=""></image>
						<text class="tuzhishuoming">{{isf==0?zi1:zi2}}</text>
					</view>
					<button id="butt" type="default" @click="qudaindan">去点单</button>
				</view>	
				<!-- 历史记录的 -->
				<view v-if="lishijiludan==0 && isf==1" class="box2">
					<view class="image" >
						<image :src="isf==0?dangqiankk:lishi" mode=""></image>
						<text class="tuzhishuoming">{{isf==0?zi1:zi2}}</text>
					</view>
					<button id="butt" type="default" @click="qudaindan">去点单</button>
				</view>
				<!-- 点了单的 -->
				<view v-if="diang==1 && isf==0" class="history">
					<view class="con2" v-for="v in goodsList" :key="v.id">
							<view class="shoptit">
								<view class="store">{{src}}</view>
								<view class="pay">{{state}}</view>
							</view>
							<view class="time">
								{{v.time}}
							</view>
							<view class="invite">
								{{ type}}
							</view>
							<view class="good_list">
								<view class="goods_con">
									<view class="content2">
										<image :src="v.scr"></image>
										<view class="tit">
											<view>
												{{v.name}}
											</view>
											<view>{{con}}</view>
										</view>
									</view>
									<view class="pri_num">
										<view class="pri">
											￥{{v.mayl*v.num}}.00
										</view>
										<view class="num">
											共 {{v.num}} 件
										</view>
									</view>
								</view>
								<view @click="anotherList(v.id)" style="display: flex;justify-content: flex-end;">
									<view class="Anotherlist">
										再来一单
									</view>
								</view>
							</view>
					</view>
				</view>
				<!-- 历史记录的 -->
				<view v-if="lishijiludan==1 && isf==1" class="history">
					<view class="con2" v-for="v in lishijilu" :key="v.id">
							<view class="shoptit">
								<view class="store">{{v.danming}}</view>
								<view class="pay">{{v.state}}</view>
							</view>
							<view class="time">
								{{v.time}}
							</view>
							<view class="invite">
								{{v.state}}
							</view>
							<view class="good_list">
								<view class="goods_con">
									<view class="content2">
										<image :src="v.scr"></image>
										<view class="tit">
											<view>
												{{v.name}}
											</view>
											<view>{{con}}</view>
										</view>
									</view>
									<view class="pri_num">
										<view class="pri">
											￥{{v.mayl*v.num}}.00
										</view>
										<view class="num">
											共 {{v.num}} 件
										</view>
									</view>
								</view>
								<view @click="anotherList(v.id)" style="display: flex;justify-content: flex-end;">
									<view class="Anotherlist">
										再来一单
									</view>
								</view>
							</view>
					</view>
				</view>
				<view class="zhanzhan">
					
				</view>
		</view>
		
</template>

<script>
	import date from '../../utils/date.js'
	export default{
		data(){
			return{
				lishijiludan:0,
				diang:0,
				lishijilu:[],
				dangqiankk:'../../static/image/tuh.jpg',
				lishi:'../../static/image/tuh.jpg',
				zi1:'当前没有进行中的订单，来一杯吧',
				zi2:'当前没有订单，来一杯吧',
				isf: 0,
				src:'府城国际店',
				state:'待付款',
				type:'外卖',
				imgUrl:'../../static/takrfood/3.png',
				tit:'红茶拿铁',
				con:'中杯/正常冰',
				pri:18,
				num:1,
				goodsList:[]
			}
		},
		methods:{
			dangqian(){
				this.isf=0;
				this.lishijiludan=3;
				if(this.goodsList==undefined){
					this.diang=0;
				}else{
					this.diang=1;
				}
			},
			lishu(){
				this.isf=1;
				this.lishijiludan=0;
				this.diang=3
				this.$ajax({
					url:'/lishi/lishi/chaxun',
					data:{
						userid:2
					}
				}).then((res)=>{
			
					this.lishijiludan=1;
					this.lishijilu=res.data.data
					for(let i=0;i<this.lishijilu.length;i++){
						// let time=Number(this.lishijilu[0].time)
						this.lishijilu[i].time=date(Number(this.lishijilu[i].time))
					}
							console.log(typeof(this.lishijilu[0].time))
				})
			},
			qudaindan(){
				uni.switchTab({
					url:'/pages/Order/order'
				})
			},
			// 点单
			anotherList(tit){
				let num=1
				getApp().globalData.tit = tit;
				// console.log(999,tit);
				// this.$store.commit('order',{tit,num})
				uni.switchTab({
					url:`../Order/order`
				})
			}
		},
		onShow(){
			this.goodsList = getApp().globalData.shangping;//赋值取得参数
			// console.log(898989899,this.goodsList)
			if(this.goodsList==undefined){
				this.isf=0;
				this.diang=0;
			}else{
				this.diang=1;
				this.isf=0;
			}
		}
	}
</script>

<style lang="less">
	.box,.box2{
		widows: 750rpx;
		background-color: #f5f5f5;
		.daohang{
			width: 750rpx;
			height: 200rpx;
			display: flex;
			justify-content: left;
			background-color: #FFFFFF;
			text{
				display: block;
				width: 100rpx;
				height: 50rpx;
				text-align: left;
				margin-top: 100rpx;
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 40rpx;
			}
		}
		.dandgsagd{
			width: 750rpx;
			height: 60rpx;
			display: flex;
			justify-content: space-around;
			background-color: #FFFFFF;
			text{
				display: block;
				width: 120rpx;
				height: 60rpx;
				font-size: 27rpx;
				color: #646464;
				font-weight: bold;
			}
			.yanshegnag{
				color: #006c4b;
				border-bottom: 2rpx solid #006c4b;
			}
		}
		.box2{
			width: 750rpx;
			background-color: #f5f5f5;
			.image{
				width: 500rpx;
				height: 500rpx;
				margin: 0 auto;
				margin-top: 224rpx;
				image{
					display: block;
					width: 250rpx;
					height: 300rpx;
					margin: 0 auto;
					
				}
				.tuzhishuoming{
					display: block;
					height: 38rpx;
					color: #6da79a;
					font-size: 25rpx;
					text-align: center;
					margin-top: 20rpx;
				}
			}
			#butt{
				width: 250rpx;
				padding: 0 20rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				border: 1rpx solid #999999;
				background-color: #007f61;
				color: #FFFFFF;
			}
		}
		.zhanzhan{
			width: 750rpx;
			height: 130rpx;
		}
		
		// 点单的css
		.history {
			font-size: 26rpx;
			background-color: #f5f5f5;
			height: 975rpx;
			padding: 60rpx 30rpx 195rpx 30rpx;	
		}
		.con2 {
			width: 692rpx;
			height: 455rpx;
			background-color: #fff;
			padding: 40rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			.shoptit {
				display: flex;
				justify-content: space-between;
				.store {
					font-size: 30rpx;
					
				}
				.pay {
					color: #818181;
				}
				
			}
			.time {
				color: #818181;
				margin: 13rpx 0 20rpx 0;
			}
			.invite {
				width: 70rpx;
				height: 40rpx;
				border: 1px solid #b29451;
				line-height: 40rpx;
				text-align: center;
				color: #b29451;
			}
			.good_list {
				.goods_con {
					display: flex;
					justify-content: space-between;
					padding: 34rpx 0;
					border-bottom: 1px solid #ebebeb;
					.content2 {
						display: flex;
						image {
							width: 88rpx;
							height: 88rpx;
						}	
						.tit {
							margin-left: 35rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							& :first-child {
								font-size: 30rpx;
								}
							& :last-child {
								color: #818181;
								}	
						}
					}
					.pri_num {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.pri {
							font-size: 30rpx;
						}
						.num {
							color: #818181;
						}
					}
					
					
				}
				
			}
			.Anotherlist {
				width: 152rpx;
				height: 56rpx;
				border: 1px solid #007d5f;
				color: #007d5f;
				border-radius: 10rpx;
				margin-top: 27rpx;
				text-align: center;
				line-height: 56rpx;
			}
			
		}
	}
</style>